<template>
  <div class="major-detail">
    <div class="header">
      <img @click="goBack" class="back-arrow" :src="backArrow" alt="" />
    </div>
    <div class="major-info">
      <div class="major-name">
        <span v-if="showTest">-</span>
        <span>{{ info.positionName }} </span>
      </div>
      <div class="other-info" v-if="info.topName">
        {{ info.topName || '-' }} ·
        {{ info.parentName || '-' }}
      </div>
    </div>
    <div class="main">
      <div class="filter-box">
        <div
          :class="activeTabIndex == index ? 'active-tab' : 'tab'"
          v-for="(item, index) in filterTabList"
          :key="index"
          @click="changeActiveTab(item, index)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="container">
        <keep-alive>
          <component
            :positionId="positionId"
            :info="info"
            :is="activeComponent"
          ></component>
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  onUnmounted,
  shallowRef,
  computed,
  onBeforeMount,
  defineAsyncComponent,
} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { positionTopicInformation } from '@/api/position';
import { showToast } from 'vant';
import { onBackPressed } from '@/utils/androidFn.js';

import backArrow from '@/assets/images/back_arrow.png';
import noBorderYellowStar from '@/assets/images/noBorderYellowStar.png';
import blueStarPlus from '@/assets/images/blueStarPlus.png';

const Empty = defineAsyncComponent(() => import('@/components/Empty.vue'));
const BasicInfo = defineAsyncComponent(() =>
  import('./components/BasicInfo.vue')
);
const WorkEnvironment = defineAsyncComponent(() =>
  import('./components/WorkEnvironment.vue')
);
const SalaryRange = defineAsyncComponent(() =>
  import('./components/SalaryRange.vue')
);
const PositionNeeds = defineAsyncComponent(() =>
  import('./components/PositionNeeds.vue')
);

const router = useRouter();
const route = useRoute();

const positionId = computed(() => route.query.positionId);

const info = ref({});
const positionTopicInformationFn = async () => {
  const params = {
    positionId: positionId.value,
  };
  const res = await positionTopicInformation(params);
  if (res.code == 200) {
    info.value = res.data;
  }
};

const goBack = () => {
  if (route.query?.fromType == 'android') {
    onBackPressed(router);
  } else {
    router.go(-1);
  }
};

const filterTabList = [
  {
    title: '基本信息',
    component: BasicInfo,
  },
  {
    title: '工作环境',
    component: WorkEnvironment,
  },
  {
    title: '薪酬区间分布',
    component: SalaryRange,
  },
  {
    title: '职业需求',
    component: PositionNeeds,
  },
];

const activeTabIndex = ref(0);
let activeComponent = shallowRef(BasicInfo);
const changeActiveTab = (item, index) => {
  activeTabIndex.value = index;
  activeComponent.value = item.component;
};

const topTag = ref('');
const parentTag = ref('');

const showTest = ref(false);
// 如果域名包含test，则显示测试文字
if (
  window.location.href.indexOf('test') !== -1 ||
  window.location.href.indexOf('localhost') !== -1
) {
  showTest.value = true;
}

onMounted(() => {
  positionTopicInformationFn();
});
</script>

<style lang="scss" scoped>
.major-detail {
  height: 100vh;
  background: linear-gradient(180deg, #e8f9ff 0%, #f4f6f8 100%);
  padding: 0 60px;
  box-sizing: border-box;
  .icon {
    width: 24px;
    height: 24px;
  }
  .header {
    min-height: 80px;
    padding: 30px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .back-arrow {
      width: 48px;
      height: 48px;
      position: absolute;
      left: 0;
    }
  }

  .major-info {
    padding: 0 30px;
    .major-name {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 36px;
      color: #333333;
      display: flex;
      align-items: center;
      .star {
        width: 36px;
        height: 36px;
        margin-left: 18px;
      }
    }
    .other-info {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 22px;
      color: #666666;
      margin-top: 12px;
    }
  }
  .main {
    .filter-box {
      margin-top: 37px;
      display: flex;
      padding-left: 22px;
      .active-tab {
        background: #0b6eff;
        border-radius: 18px 18px 0px 0px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 26px;
        color: #ffffff;
        padding: 10px 83px;
      }
      .tab {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 26px;
        color: #000000;
        padding: 10px 83px;
      }
    }
    .container {
      width: 100%;
      height: calc(100vh - 322px);
      background: #ffffff;
      border-radius: 32px 32px 0px 0px;
    }
  }
}
</style>
